<template>
    <div class="container">
    <div class="elTabs">
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="消息中心" name="消息中心">
                <h5>消息中心</h5>
                <template>
                    <el-table
                    :data="tableData"
                    style="width: 100%">
                        <el-table-column
                            prop="date"
                            label="标题"
                            width="250">
                        </el-table-column>
                        <el-table-column
                            prop="name"
                            label="内容">
                        </el-table-column>
                        <el-table-column
                            prop="address"
                            label="日期"
                            width="250">
                        </el-table-column>
                    </el-table>
                </template>
            </el-tab-pane>
            <el-tab-pane label="意见反馈" name="意见反馈">
                <h5>意见反馈</h5>
                <el-input placeholder="" v-model="searchInput" style="width:300px;margin:10px 0;">
                    <i slot="prefix" class="el-input__icon el-icon-search"></i>
                    <el-button slot="append" @click="searchOpinion">搜索</el-button>
                </el-input>
                <div style="float: right;margin:10px 0;"><el-button type="primary" @click="goAdd">新增意见</el-button></div>
                <template>
                    <el-table
                    :data="opinionData"
                    style="width: 100%">
                        <el-table-column
                            prop="caption"
                            label="标题"
                            width="250">
                        </el-table-column>
                        <el-table-column
                            prop="content"
                            label="内容">
                        </el-table-column>
                        <el-table-column
                            prop="createtime"
                            label="日期"
                            width="250">
                        </el-table-column>
                        <el-table-column
                            prop=""
                            label="操作"
                            width="150">
                            <template slot-scope="scope">
                                <el-button @click="opinionClick(scope.row)" type="text" size="small">查看</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </template>
            </el-tab-pane>
            <el-tab-pane label="系统日志" name="系统日志">
                <h5>系统日志</h5>

                <div style="margin:10px 0;display:flex;align-items: center;">
                    <!--<i slot="prefix" class="el-input__icon el-icon-search"></i>-->
                    <div style="font-size:12px;">时间选择</div>
                    <div style="margin-left:10px;">
                            <el-date-picker v-model="date1" value-format="yyyy-MM-dd" format="yyyy/MM/dd" type="date" style="width:150px;margin: 0 10px;" placeholder="选择日期"></el-date-picker>至
                            <el-date-picker v-model="date2" value-format="yyyy-MM-dd" format="yyyy/MM/dd" type="date" style="width:150px;margin: 0 10px;" placeholder="选择日期"></el-date-picker>
                    </div>
                    <div style="font-size:12px;margin-left:50px;margin-right:20px;">操作栏目</div>
                    <div>
                        <el-select v-model="value" placeholder="请选择">
                            <el-option v-for="item in options" :key="item.id" :label="item.operation" :value="item.operation"></el-option>
                        </el-select>
                    </div>
                    <div style="font-size:12px;margin-left:50px;margin-right:20px;">操作人</div>
                    <el-input placeholder="单行输入" v-model="searchInputRZ" style="width:200px;margin:10px 0;"></el-input>
                    <el-button style="position: absolute;right:0;" type="primary" slot="append" @click="searchJournal">查询</el-button>
                </div>

                <template>
                    <el-table
                    :data="systemLogData"
                    style="width: 100%">
                        <el-table-column
                            prop="createtime"
                            label="时间">
                        </el-table-column>
                        <el-table-column
                            prop="userName"
                            label="操作人">
                        </el-table-column>
                        <el-table-column
                            prop="operation"
                            label="操作栏目">
                        </el-table-column>
                        <el-table-column
                            prop="profession"
                            label="操作业务">
                        </el-table-column>
                        <el-table-column
                            prop="ip"
                            label="客户端IP">
                        </el-table-column>
                    </el-table>
                </template>
            </el-tab-pane>
        </el-tabs>
    </div>
    <el-pagination layout="total, prev, pager, next, jumper" :page-size="pagesize" @current-change="handleCurrentChange" :total="total" style="margin: 20px auto;"></el-pagination>
    </div>
</template>

<script>
	//消息中心/意见反馈
 let systemLog_inquire = p => axios.post('https://bbgy.cpzsyun.com:82/api/control/log/inquire', p); //查看系统日志
 let opinion_inquire = p => axios.post('https://bbgy.cpzsyun.com:82/api/control/word/inquire', p); //查看意见
 let opinion_search = p => axios.post('https://bbgy.cpzsyun.com:82/api/control/word/search', p); //意见反馈模糊搜索意见
 let systemMessage_inquire = p => axios.post('https://bbgy.cpzsyun.com:82/api/control/news/inquire', p); //查看消息中心
 let systemLog_search = p => axios.post('https://bbgy.cpzsyun.com:82/api/control/log/search', p); //查询
export default {
    name: 'message',
    components: {},
    data() {
        return {
            value:'',
            date1: '',
            date2: '',
            list:[],
            activeName: '消息中心',
            materialType: 2,
            pagesize:10,
            total:0,
            currentPage:1,
            searchInput: '',
            searchInputRZ: '',
            opinionData: [],  //意见反馈
            systemLogData: [],  //系统日志
            tableData: [],
            options: [{
                value: '选项1',
                label: '企业设置'
            }, {
                value: '选项2',
                label: '员工管理'
            }, {
                value: '选项3',
                label: '供应商管理'
            }, {
                value: '选项4',
                label: '客户管理'
            },],
        };
    },
    computed: {},
    methods: {
        init() {
            //意见反馈
            // let opinionDatas = {
            //     page: 1
            // }
            // opinion_inquire(opinionDatas).then((res) =>{
            //     this.opinionData = res.rows
            //     this.total = res.total
            // })
            //消息中心
            let messaDatas = {
                page: 1
            }
            systemMessage_inquire(messaDatas).then((res) =>{
                this.tableData = res.rows
                this.total = res.total
            })
            //系统日志
            // let systemLogDatas = {
            //     page: 1
            // }
            // systemLog_inquire(systemLogDatas).then((res) =>{
            //     this.systemLogData = res.rows
            // })
            //查询操作栏目
            // systemLog_getOperation().then((res) =>{
            //     console.log(res)
            //     this.options = res.data
            // })
        },
        //意见搜索
        searchOpinion() {
            let searchData = {
                caption: this.searchInput
            }
            opinion_search(searchData).then((res) =>{
                this.opinionData = res.data
                this.total = res.data.length
            })
        },
        //日志搜索
        searchJournal() {
            console.log(this.date1)
            console.log(this.date2)
            let searchInputdata = {
                log:{
                    time: this.date1,
                    times: this.date2,
                    userName: this.searchInputRZ,
                    operation: this.value
                }
            }
            systemLog_search(searchInputdata).then((res) =>{
                console.log(res)
                this.systemLogData = res.data.content
                this.total = res.totalElements
            })
        },
        //标签页切换
        handleClick(tab, event){
            // console.log(tab, event)
            if(tab.label == '消息中心'){
                let messaDatas = {
                    page: this.currentPage
                }
                systemMessage_inquire(messaDatas).then((res) =>{
                    this.tableData = res.rows
                    this.total = res.total
                })
            }
            if(tab.label == '意见反馈'){
                let opinionDatas = {
                    page: this.currentPage
                }
                opinion_inquire(opinionDatas).then((res) =>{
                    this.opinionData = res.rows
                    this.total = res.total
                })
            }
            if(tab.label == '系统日志'){
                let systemLogDatas = {
                    page: this.currentPage
                }
                systemLog_inquire(systemLogDatas).then((res) =>{
                    this.systemLogData = res.rows
                    this.total = res.total
                })
            }
        },
        dianji(item,index){

        },
        handleCurrentChange(val){
            if(this.activeName == '消息中心'){
                let messaDatas = {
                    page: this.currentPage
                }
                systemMessage_inquire(messaDatas).then((res) =>{
                    this.tableData = res.rows
                    this.total = res.total
                })
            }
            if(this.activeName == '意见反馈'){
                let opinionDatas = {
                    page: val
                }
                opinion_inquire(opinionDatas).then((res) =>{
                    this.opinionData = res.rows
                    this.total = res.total
                })
            }
            if(this.activeName == '系统日志'){
                let systemLogDatas = {
                    page: val
                }
                systemLog_inquire(systemLogDatas).then((res) =>{
                    this.systemLogData = res.rows
                    this.total = res.total
                })
            }
        },
        //查看意见反馈
        opinionClick(row) {
        //     let selectIdData = {
        //         id: row.id
        //     }
        //    opinion_selectId(selectIdData).then((res) =>{

        //    })
           this.$router.push({
                path: '/systemSetup/organization/indexsss/check',
                query: {
                    id: row.id
                }
            });
        },
        biaoji() {

        },
        goAdd() {
            this.$router.push({
					path:'/systemSetup/organization/indexsss/added'
			})
        },
    },
    mounted () {
        this.init()
    },
	watch:{
	},
};
</script>


<style scoped>
 .el-pagination{
    text-align: center;
}
.elTabs{
    position: relative;
}
.elTabs a.elTabsA{
    position: absolute;
    right: 2px;
    top: 10px;
    font-size: 12px;
    color:#409EFF;
    cursor: pointer;
}
</style>
